import React from 'react';
import { FormInstance } from 'antd/lib/form';
import '@ant-design/compatible/assets/index.css';
import { Modal, Button, message, Input, Form, Radio, Tag } from 'antd';
import {connect} from 'dva';

const FormItem = Form.Item;
const {TextArea} = Input;
const mapStateToProps = state => ({
})
class ResourceAddModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.formRef = React.createRef<FormInstance>();
    this.state = {
      menuDisabled: false,
      buttonLoading: false,
      checkMenuIcon: true
    }
  }

  componentDidMount() {
  }

  onSubmit = (e) =>{
    e.preventDefault();
    // 提交表单，与点击submit按钮效果相同
    this.formRef.current.submit();
  };
  onFinish = (values) => {
      const { dispatch, record } = this.props;
      const submitData = {
          ...values,
          resourceParent: record.sid,
          resourceLevel: record.resourceLevel + 1
      };
      this.setState({buttonLoading: true});
      dispatch({
          type:"resource/postObjWithRes",
          payload:{ url:'/resource/add', ...submitData},
          callback: response => {
              this.setState({ buttonLoading: false});
              if (response.statusCode === "0") {
                message.success("新增成功");
                this.close();
              }
          }
      });
  };

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current.resetFields();
    this.setState({buttonLoading: false, checkMenuIcon: false});
    closeModal();
  }

  onResourceTypeChange = (e) => {
      const value = e.target.value;
      if (value === 0) {
        const fileData = [{name: "resourceIcon", value: "menu"}];
        this.setState({checkMenuIcon: true, menuDisabled: false,});
        this.formRef.current.setFields(fileData);
      } else {
        this.setState({checkMenuIcon: false, menuDisabled: true});
        const fileData = [{name: "resourceIcon", value: ""}];
        this.formRef.current.setFields(fileData);
      }
      
  }

  render() {
    const { modalVisible, record } = this.props;
    const { buttonLoading, checkMenuIcon, menuDisabled } = this.state;
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>取消</Button>
        <Button size="small" loading={buttonLoading} onClick={this.onSubmit} type="primary">保存</Button>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    return (
      <Modal
        footer={footer}
        title="新增资源"
        visible={modalVisible}
        onCancel={this.close}
      >
        <Form
          ref={this.formRef}
          onFinish={this.onFinish}
          style={{ marginTop:24 }}
          { ...formItemLayout }
        >
            <FormItem
                name={"resourceParentName"}
                label={"上级资源"}
            >
              <Tag color="blue">{record && record.resourceName ? record.resourceName : "根节点"}</Tag>
            </FormItem>
            <FormItem
                name={"resourceCode"}
                label={"资源Code"}
                rules={[{ required: true, message:"请输入资源Code！" }]}
            >
              <Input placeholder={"请输入资源Code"} allowClear maxLength={100}/>
            </FormItem>
            <FormItem
                name={"resourceName"}
                label={"资源名称"}
                rules={[{ required: true,message:"请输入资源名称！" }]}
            >
              <Input placeholder={"请输入资源名称"} allowClear  maxLength={50}/>
            </FormItem>
            <FormItem
                name={"resourceDesc"}
                label={"资源描述"}
            >
              <TextArea placeholder={"请输入资源描述"} rows={2} maxLength={200}/>
            </FormItem>
            <FormItem
                name={"resourceType"}
                label={"资源类型"}
                initialValue={0}
                rules={[{ required: true,message:"请选择资源类型！" }]}
            >
                <Radio.Group onChange={this.onResourceTypeChange}>
                  <Radio value={0}>菜单</Radio>
                  <Radio value={1}>页面</Radio>
                  <Radio value={2}>按钮</Radio>
                </Radio.Group>
            </FormItem>
            <FormItem
                name={"resourceIcon"}
                label={"菜单图标"}
                rules={[{ required: checkMenuIcon, message:"请输入菜单图标！" }]}
                initialValue={"menu"}
            >
              <Input allowClear maxLength={100} disabled={true}/>
            </FormItem>
            <FormItem
                name={"onlySuperMgr"}
                label={"超级管理员专用"}
                initialValue={2}
                rules={[{ required: true, message:"请选择超级管理员是否可用！" }]}
            >
                <Radio.Group>
                  <Radio value={2}>否</Radio>
                  <Radio value={1}>是</Radio>
                </Radio.Group>
            </FormItem>
          </Form>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(ResourceAddModal);
